<template>
	<div class="home">
		<ScrollList
			@pullUp="handlePullUp"
			@pullDown="handlePullDown"
			:isHasMore="isHasMore"
			text="没有更多数据了！！！！！"
		>
			<div class="list">
				<dl v-for="v in list" :key="v.id" @click="toPosts(v.id)">
					<dt>
						<img :src="v.img" />
					</dt>
					<dd>
						<h3>{{ v.title }}</h3>
						<p>{{ v.desc }}</p>
					</dd>
				</dl>
			</div>
		</ScrollList>
	</div>
</template>

<script lang="ts" setup>
import { fetchList } from '@/api'
import { onMounted, reactive, ref } from 'vue';
import ScrollList from '@/components/ScrollList/index.vue'
import { useRouter } from 'vue-router'
import { ListItemType } from '@/interface'

const list = ref<ListItemType[]>([])
const isHasMore = ref(true)
const page = reactive({
	pageCode: 1,
	pageSize: 10
})
const router = useRouter()

const getList = async () => {
	const resp = await fetchList(page)
	const { code, data } = resp.data
	if (code === 200) {
		list.value = list.value.concat(data)
	} else {
		isHasMore.value = false
	}
}

const handlePullUp = async () => {
	page.pageCode++
	await getList()
	console.log(111);
}

const handlePullDown = async () => {
	page.pageCode = 1
	list.value.length = 0
	await getList()
}

const toPosts = (id: string) => {
	router.push({ name: 'posts', params: { id } })
	// router.push(`/posts/${id}`)
}


onMounted(() => {
	getList()
})


</script>

<style lang="scss" scoped>
.home {
	height: 100%;
	.wrapper {
		height: 100%;
		overflow: hidden;

		.list {
			dl {
				display: flex;
				border-bottom: 1px solid #ccc;
				margin: 4px 0;
				dd {
					margin-left: 10px;
				}

				img {
					height: 100px;
				}
			}
		}
	}
}
</style>